<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* CSS样式 */
		#image-container {
		  position: relative;
		  width: 500px;
		  height: 500px;
		}
		#overlay {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 300px;
		  height: 300px;
		  background-color: rgba(0, 0, 0, 0.5);
		}
		#canvas {
		  width: 200px;
		  height: 200px;
		}
	</style>
	<body>
		<!-- HTML结构 -->
		<div id="image-container">
		  <img src="../img/background-2.jpg" id="image" alt="Image">
		  <div id="overlay"></div>
		</div>
		<canvas id="canvas"></canvas>
		<button onclick="jiequ()">截取</button>
		<script>
			let canvas=document.getElementById("canvas");
			let ctx = canvas.getContext('2d');
			let img = document.getElementById('image');
			
			img.onload = function (){
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			}
			
			function jiequ(){
				ctx.drawImage(img, 0, 0, canvas.width+100, canvas.height+200);
			}
			
		
			let url = canvas.toDataURL();
			console.log(url);
		</script>
	</body>
</html>